<template>
  <div class="incomeForm">
    <div class="incomeForm-header">
      <p>填写收入记录</p>
    </div>
    <div class="incomeForm-content">
      <div id="form">
        <div class="form-group" v-on:click="incomeMoney()">
          <div class="form-title">
            <p>收入金额</p>
          </div>
          <div class="incomeMoney-content">0.00</div>
          <input type="hidden" id="incomeMoney" name="incomeMoney" value="0">
        </div>
        <div class="form-group" id="select-category" v-on:click="selectCategory()">
          <div class="form-title">
            <p>收入类型</p>
          </div>
          <div class="incomeCatory-content"></div>
          <input type="hidden" id="incomeCategory" name="incomeCategory" value="">
        </div>
        <div class="form-group" id="select-account" v-on:click="selectAccount()">
          <div class="form-title">
            <p>账户类型</p>
          </div>
          <div class="incomeAccount-content"></div>
          <input type="hidden" id="incomeAccount" name="incomeAccount" value="">
        </div>
        <div class="form-group" id="select-date" v-on:click="selectDate()">
          <div class="form-title">
            <p>日期</p>
          </div>
          <div class="incomeDate-content">0000-00-00</div>
          <input type="hidden" id="incomeDate" name="incomeDate" value="">
        </div>
        <div class="form-group" id="select-time" v-on:click="selectTime()">
          <div class="form-title">
            <p>时间</p>
          </div>
          <div class="incomeTime-content">00:00</div>
          <input type="hidden" id="incomeTime" name="incomeTime" value="">
        </div>
        <div class="form-group">
          <div class="form-title">
            <p>备注（描述信息）</p>
          </div>
          <textarea id="description" name="description" rows="6"></textarea>
        </div>
        <div class="form-footer">
          <input type="submit" id="submit" value="保存" v-on:click="submit()">
          <input id="reset" value=" 返回" v-on:click="goToBack()">
        </div>
        <br><br><br><br><br><br><br><br>
      </div>
    </div>
    <dialogSelectTime v-on:resultTime="showTime"></dialogSelectTime>
    <dialogSelectDate v-on:resultDate="showDate"></dialogSelectDate>
    <dialogSelectCategory2 v-on:resultCategory="showCategory"></dialogSelectCategory2>
    <dialogSelectAccount v-on:resultAccount="showAccount"></dialogSelectAccount>
    <calculator v-on:resultMoney="showMoney"></calculator>
    <dialogBox v-bind:message="error" v-bind:href="location" id="dialog"></dialogBox>
  </div>
</template>

<script>
  import dialogSelectTime from '../public/dialog-selectTme/dialog-selectTime.vue'
  import dialogSelectDate from '../public/dialog-selectDate/dialog-selectDate.vue'
  import dialogSelectCategory2 from '../public/dialog-selectCategory2/dialog-selectCategory2.vue'
  import dialogSelectAccount from '../public/dialog-selectAccount/dialog-selectAccount.vue'
  import calculator from '../public/calculator/calculator.vue'
  import dialogBox from '../public/dialog-box/dialog-box.vue'
  export default {
    name: '',
    data () {
      return {
        date: '',
        time: '',
        error:'',
        location:''
      }
    },
    components:{dialogSelectTime,dialogSelectDate,dialogSelectCategory2,dialogSelectAccount,calculator,dialogBox},
    created:function () {

    },
    mounted:function () {
      //如果route上面有带参数data_id，则进行编辑上的数据请求
      if(this.$route.query.id){
        this.edit(this.$route.query.id);
      }

      $('.selectDate').hide();
      $('.selectTime').hide();
      $('.selectCategory').hide();
      $('.selectAccount').hide();
      $('.calculator').hide();
      $('#dialog').hide();

      $('.form-group').click(function () {
        $(this).css({'background-color':'#FFF8DC'});
        $(this).siblings().css({'background-color':'#ffffff'});
        $(this).find('#incomeMoney').css({'background-color':'#FFF8DC'});
        $(this).find('textarea').css({'background-color':'#FFF8DC'});
        $(this).siblings().find('#incomeMoney').css({'background-color':'#ffffff'});
        $(this).siblings().find('textarea').css({'background-color':'#ffffff'});

        let date=new Date();
        this.date=(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()).toString();
      })

    },
    methods:{
      showMoney:function (data) {
        $('.incomeMoney-content').text(data=='NaN'?'0.00':data);
        $('#incomeMoney').val(data=='NaN'?'0.00':data);
      },
      showTime:function (data) {
        $('.incomeTime-content').text(data);
        $('#incomeTime').val(data);
      },
      showDate:function (data) {
        $('.incomeDate-content').text(data);
        $('#incomeDate').val(data);
      },
      showCategory:function (data) {
        $('.incomeCatory-content').html(data);
        let value=$('.incomeCatory-content p').text();
        $('#incomeCategory').val(value);
      },
      showAccount:function (data) {
        $('.incomeAccount-content').html(data);
        let value=$('.incomeAccount-content p').text();
        $('#incomeAccount').val(value);
      },
      selectTime:function () {
        $('.selectTime').show();
      },
      selectDate:function () {
        $('.selectDate').show();
      },
      selectCategory:function () {
        $('.selectCategory').show();
      },
      selectAccount:function () {
        $('.selectAccount').show();
      },
      incomeMoney:function () {
        $('.calculator').show();
      },
      submit:function () {
        let that=this;
        let incomeMoney=$('#incomeMoney').val();
        let incomeCategory=$('#incomeCategory').val();
        let incomeAccount=$('#incomeAccount').val();
        let incomeDate=$('#incomeDate').val();
        let incomeTime=$('#incomeTime').val();
        let description=$('#description').val();
        let category_logo=$('.incomeCatory-content i').attr('class');
        let account_logo=$('.incomeAccount-content i').attr('class');

        let submitData={
          user_id: sessionStorage.getItem('id'),
          token:sessionStorage.getItem('token'),
          _id:that.$route.query.id?that.$route.query.id:'',
          incomeMoney:incomeMoney,
          incomeCategory:incomeCategory,
          incomeAccount:incomeAccount,
          incomeDate:incomeDate,
          incomeTime:incomeTime,
          description:description,
          category_logo:category_logo,
          account_logo:account_logo
        };

        if(incomeCategory==''){
          this.error='请选择收入记录中的“收入类型”！';
          $('#dialog').show();
          return false;
        }else if(incomeAccount==''){
          this.error='请选择收入记录中的“账户类型”！';
          $('#dialog').show();
          return false;
        }else if(incomeDate==''){
          this.error='请选择收入记录中的“日期”！';
          $('#dialog').show();
          return false;
        }else if(incomeTime==''){
          this.error='请选择收入记录中的“时间”！';
          $('#dialog').show();
          return false;
        }else {
          if(that.$route.query.id){
            that.$ajax.post('/api/incomeEditSubmit',submitData).then(function (response) {
              that.error=response.data.success;
              that.location='/#/index';
              $('#dialog').show();
            }).catch(function (error) {
              that.error=error.response.data.error.message||error.response.data.error;
              that.location='/#/login';
              $('#dialog').show();
              $('#loading').hide();
            })
          }else {
            this.$ajax.post('/api/incomeMoney', submitData).then(function (response) {
              location.href='/#/index'
            }).catch(function (error) {
              if(error.response){
                that.error=error.response.data.error.message||error.response.data.error;
                that.location='/#/login';
                $('#dialog').show();
                $('#loading').hide();
                console.log(error.response)
              }
            })
          }
        }
      },
      edit:function (data) {
        let that=this;
        let requestData={
          user_id: sessionStorage.getItem('id'),
          token:sessionStorage.getItem('token'),
          id:data
        }
        this.$ajax.get('/api/incomeEdit',{params:requestData}).then(function (response) {
          $('#incomeMoney').val(response.data.data.incomeMoney);
          $('#incomeCategory').val(response.data.data.incomeCategory);
          $('#incomeAccount').val(response.data.data.incomeAccount);
          $('#incomeDate').val(response.data.data.incomeDate);
          $('#incomeTime').val(response.data.data.incomeTime);
          $('#description').val(response.data.data.description);

          $('.incomeMoney-content').text(response.data.data.incomeMoney.toFixed(2));
          $('.incomeCatory-content').html('<i class="'+response.data.data.category_logo+'"></i><p>'+response.data.data.incomeCategory+'</p>');
          $('.incomeAccount-content').html('<i class="'+response.data.data.account_logo+'"></i><p>'+response.data.data.incomeAccount+'</p>');
          $('.incomeDate-content').text(response.data.data.incomeDate);
          $('.incomeTime-content').text(response.data.data.incomeTime);
        }).catch(function (error) {
          if(error.response){
            that.error=error.response.data.error.message||error.response.data.error;
            that.location='/#/login';
            $('#dialog').show();
            $('#loading').hide();
          }
        })
      },
      goToBack:function () {
        javascript:history.back(-1);
      }
    }
  }
</script>

<style>
  @import "css/incomForm.css";
</style>
</style>
